<!--
* @description 右上角气泡
* @author xyjia
* @date 2022/01/11 10:49:19
!-->
<template>
  <span class="pop-picker">
    <van-popover
    class="vanpopoverCus"
        v-model="showPopover"
        trigger="click"
        placement="bottom-end"
        :offset="[10,0]"
        :overlay="true"
        @select="onSelect"
        @close="closepopup"
        >
        <template #default>
            <unit-picker
                ref="popUnit"
                v-if="userInfo.isMuilUnitUser"
                text="选择单位"
                :showIcon="false"
                @change="onUnitChange"
                :currentOrgprops='currentOrgprops'
                style="min-width:120px;display:flex;margin-left:12px;color:#000000"
            ></unit-picker>
            <point-picker
                ref="pointpicker"
                text="选择点位类别"
                :options="options_point"
                :showIcon="false"
                :selectedPoint="objpointselect"
                @change="onPointChange"
                style="min-width:120px;display:flex;margin-left:12px;color:#000000"
            ></point-picker>
            <div class="clearbtncss">
              <van-button hairline color="#2196f3" plain @click="clearSelectparam">清&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空</van-button>
            </div>
        </template>
        <template #reference>
            <i class="iconfont icon-APPicon_shaixuan1" :class="JSON.stringify(objunitselect).length==2&&JSON.stringify(objpointselect).length==2?'':'select-active'" style="font-size:24px"></i>
        </template>
    </van-popover>
  </span>
</template>

<script>
 import UnitPicker from '@/components/UnitPicker'
 import PointPicker from '@/components/PointPicker'
 import { mapState } from 'vuex'
import {getLists} from '@/api/examine'
export default {
  props: {
  },
  data() {
    return {
      objunitselect: '',
      objpointselect: '',
      showPopover: false,
      options_point: [],
      currentOrgprops: {}
    }
  },

  components: {UnitPicker, PointPicker},

  computed: {...mapState(['userInfo'])},

  created() {
    this.getListsdata()
  },
  props: {
    clearbyout: Boolean,
  },
  mounted() { },
  watch: {
    clearbyout(bool) {
      let that = this
      this.objunitselect = ''
      this.objpointselect = ''
      setTimeout(() => {
          that.showPopover = false
      }, 300);
      this.currentOrgprops = {} //重置单位
    }
  },
  methods: {
    clearSelectparam() {
      let that = this
      this.objunitselect = ''
      this.objpointselect = ''
      setTimeout(() => {
          that.showPopover = false
      }, 300);
      this.currentOrgprops = {} //重置单位
      this.$emit('ClearOrgIdsPoint', '')
    },
    getListsdata() {
      getLists({queryType: 0}).then((res) => {
         this.options_point = res.data?res.data.map(n => {
           n.name = n.pointTypeName
            return n
         }): []
      })
    },
    onUnitChange(obj) {
        let that = this
        this.objunitselect = obj
        setTimeout(() => {
            that.showPopover = false
        }, 500);
        this.$emit('getOrgIds', obj)
    },
    onPointChange(obj) {
        let that = this
        this.objpointselect = obj
        setTimeout(() => {
            that.showPopover = false
        }, 500);
        this.$emit('getPoint', obj)
    },
    onSelect() {
        this.showPopover = false
    },
    closepopup() {
        this.showPopover = false
    },
  },
}
</script>
<style lang='scss'>
.pop-picker {
  .van-picker__toolbar {
    justify-content: flex-end;
  }
  .van-picker__cancel {
    display: none;
  }
  
}
.clearbtncss {
  padding: 8px 12px;
  .van-button {
    width: 100%;
    height: 33px !important;
  }
}
</style>